<template>
	<view class="star-avatar">
		<image :src="url" @error="handleImageError" class="responsive-image"></image>
	</view>
</template>

<script>
	export default {
		name: "StarAvatar",
		props: {
			imageUrl: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				url: ""
			};
		},
		watch: {
			imageUrl: {
				handler(newValue, oldValue) {
					if (newValue) {
						this.url = newValue;
					} else {
						this.url = '/static/seat/Group_427321295.png';
					}

				},
				immediate: true
			}
		},
		methods: {
			handleImageError(e) {
				// 处理图片加载失败的逻辑
				// console.error('图片加载失败', e);
				// 可以在这里设置一个占位图片
				this.url = '/static/seat/Group_427321295.png';
			}
		}
	}
</script>

<style lang="scss">
	.star-avatar {
		min-width: 10px;

		.responsive-image {
			width: 100%;
			/* 图片宽度适应父元素的宽度 */
			height: 100%;
			/* 图片高度适应父元素的高度 */

			border: 1px solid #ccc;
			border-radius: 5px;
		}
	}
</style>